<template>
  <div class="home">
    <van-nav-bar title="计步器设置" left-arrow @click-left="onClickLeft" />
    <div class="home-content">
        <van-cell
          class="home-content-cell"
          center
          size="large"
          title="身高（厘米）"
        >
          <template #right-icon>
            <van-stepper
              v-model="Height"
              step="1"
              max="250"
              min="50"
              @change="onSetHeight"
            />
          </template>
        </van-cell>
        <van-cell
          class="home-content-cell"
          center
          size="large"
          title="体重（千克）"
        >
          <template #right-icon>
            <van-stepper
              v-model="Weight"
              step="1"
              max="250"
              min="20"
              @change="onSetWeight"
            />
          </template>
        </van-cell>
        <van-field
          class="home-content-cell"
          size="large"
          readonly
          clickable
          label="运动类型"
          :value="cdata"
          placeholder="选择运动类型"
          input-align="right"
          @click="show = true"
        />
        <van-popup v-model="show" round position="bottom">
          <van-picker
            title="运动类型"
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
          />
        </van-popup>
    </div>
  </div>
</template>

<script>
import mqtt from "mqtt";
//import { Toast } from 'vant';
var client;
const options = {
  connectTimeout: 40000,
  clean: true,
};
client = mqtt.connect("ws://121.5.58.100:8083/mqtt", options);

export default {
  //name: 'stepSettings',
  components: {},
  data: function () {
    return {
      cdata: localStorage.getItem("cdata"),
      show: false,
      columns: ["步行", "短跑", "长跑", "慢跑"],
      stepShow: false,
      Height: localStorage.getItem("Height"),
      Weight: localStorage.getItem("Weight"),
    };
  },
  methods: {
    onConfirm(cdata) {
      this.cdata = cdata;
      localStorage.setItem("cdata", this.cdata);
      this.show = false;
    },
    onStart() {
      if (this.start === "开始计步") {
        this.color =
          "linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%)";
        this.start = "暂停计步";
      } else {
        this.color = "linear-gradient(to right, #ff6034, #ee0a24)";
        this.start = "开始计步";
      }
    },
    onc() {
      client.publish("Fish/control", this.hexToRgb(this.color));
      console.log(JSON.parse(this.hexToRgb(this.color)));
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSetHeight() {
      localStorage.setItem("Height", this.Height);
      //console.log(this.deviceData.set - (this.deviceData.set*2/21))
    },
    onSetWeight() {
      localStorage.setItem("Weight", this.Weight);
      //console.log(this.deviceData.set - (this.deviceData.set*2/21))
    },
  },
};
</script>

<style lang="scss" scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

.v-enter-active,
.v-leave-to {
  transition: all 0.6s ease;
}

/* v-move 和 v-leave-to 配合使用，能够实现列表后续的元素，逐渐飘上来的效果 */
.v-move {
  transition: all 0.6s ease;
}

.v-leave-to {
  position: absolute;
}
.home {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-flow: column;

  &-content {
    height: 100%;
    margin: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    transition: 0.3s;
    overflow: auto;
    &-cell {
      margin: 0 0 10px 0;
      width: auto;
      border-radius: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    &-control {
      border-radius: 20px;
      margin-top: 0px;
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 60px;
    }
    &-area {
      &-text {
        margin-left: 20px;
        font-size: 5vw;
        color: white;
        font-weight: 900;
      }
    }
    &-text {
      margin: px2rem(20);
      font-size: px2rem(30);
      color: white;
      font-weight: 600;
      margin-bottom: px2rem(30);
    }
    &-shebei {
      margin-left: px2rem(20);
      margin-bottom: px2rem(5);
      font-size: px2rem(14);
      color: white;
      font-weight: 400;
    }
    &-info {
      transition: 0.5s;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 16px 15px;
      &-item {
        transition: 0.5s;
        margin: 5px;
        text-align: center;
        padding: 5px;
        border-radius: 20px 20px 20px 20px;
        // box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
        width: calc(50% - 20px);
        height: calc(50% - 10px);
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: left;
        background-color: rgba(255, 255, 255, 0.9);
        background-attachment: fixed;
        &-title {
          display: flex;
          flex-direction: row;
          align-items: center;

          &-name {
            margin: auto;
            transition: 0.5s;
            text-align: left;
            color: black;
            //margin-top: 0;
            font-size: 4vw;
          }
        }

        &-data {
          transition: 0.5s;
          // text-align: right;
          color: black;
          margin: auto;
          font-size: 10vw;
          font-weight: 500;
        }
      }
    }
  }
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
</style>
